<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>12_指令_内置指令</title>
  <style>
    [v-cloak] {
      display: none
    }
  </style>
</head>

<body>
  <!--
常用内置指令
  v-text : 更新元素的 textContent
  v-html : 更新元素的 innerHTML
  v-if : 如果为true, 当前标签才会输出到页面
  v-else: 如果为false, 当前标签才会输出到页面
  v-show : 通过控制display样式来控制显示/隐藏
  v-for : 遍历数组/对象
  v-on : 绑定事件监听, 一般简写为@
  v-bind : 强制绑定解析表达式, 可以省略v-bind
  v-model : 双向数据绑定
  ref : 为某个元素注册一个唯一标识, vue对象通过$els属性访问这个元素对象
  v-cloak : 使用它防止闪现表达式, 与css配合: [v-cloak] { display: none }
-->
  <div id="example">
    <p v-cloak>{{text}}</p>
    <p v-text="text" ref="element"></p>
    <p v-html="text"></p>

    <p v-once v-cloak>{{num}}</p>
    <button @click="num++">按钮</button>

    <p v-pre>{{num}}</p>
  </div>

  <script type="text/javascript" src="../js/vue.js"></script>
  <script type="text/javascript">
    /*
      所有指令语法：
        1. 重要（经常使用）全面掌握
          - v-bind
          - v-model
          - v-on
          - v-if/v-else-if/v-else
          - v-show
          - v-for
        2. 次要（很少使用）了解
          - v-text 显示文本内容
          - v-html 显示html内容
          - v-once 只解析一次
          - v-pre  元素内部不解析，直接渲染原始数据
          - v-cloak 防止闪屏, 与css配合: [v-cloak] { display: none }
      
      特殊属性：ref
        1. 作用：获取真实DOM元素 或 组件实例对象
          给普通元素绑定ref属性，得到就是真实DOM元素
          给组件绑定ref属性，得到就是组件实例对象
        2. 用法：
          - 给元素绑定ref属性
            <p ref="xxx"></p>
          - 获取
            this.$refs.xxx
        3. 建议
          能少用尽量少用（能不用尽量不用）
          建议不要直接操作DOM元素，性能不好

    */
    new Vue({
      el: '#example',
      data: {
        text: '<span>hello</span>',
        num: 0
      },
      mounted() {
        console.log(this.$refs.element);
      }
    })
  </script>
</body>

</html>